<template>
  <div id="course">
    <c-title :hide="false" text="课程"></c-title>

    <div class="search" @click="moreGoods('all')">
      <van-search style="flex: 1;" v-model="searchVal" placeholder="搜索课程/讲师" shape="round">
        <template #left-icon>
          <i class="iconfont  icon-sousuo1"></i>
        </template>
      </van-search>
    </div>

    <div class="tupian">
      <van-swipe autoplay="30000" v-if="showCarousel" style="">
        <van-swipe-item v-for="(item, i) in carouselInfo" :key='i' style="">
          <a :href="item.link ? item.link : 'javascript:;'">
            <div style="padding-right: 1px; padding-left: 1px;">
              <img :src="item.thumb" style="width: 100%;border-radius: 0.625rem;" />
            </div>
          </a>
          <template #indicator>
            <div class="custom-indicator"></div>
          </template>
        </van-swipe-item>
      </van-swipe>
    </div>

    <main :class="carouselInfo && carouselInfo.length > 0 ? 'main' : ''">

      <div class="ment">
        <van-swipe :autoplay="0" indicator-color="#f15353" class="sw_list"
          :width="fun.getPhoneEnv() == 3 ? 375 : clientWidths" :class="{
            sw_list_6: navigatioData != null && navigatioData.length > 0 && navigatioData[0].length <= 5,
            sw_list_12: navigatioData != null && navigatioData.length > 0 && navigatioData[0].length > 5,
            sw_list_0: navigatioData.length == 0
          }" v-if="isNavigatioy">
          <van-swipe-item v-for="(items, index) in navigatioData" :key="index">
            <div class="video_list">
              <div class="video_icon" v-for="(item, index) in items" :key="index">
                <a :href="item.link ? item.link : 'javascript:;'">
                  <div class="top" v-if="item.thumb">
                    <img :src="item.thumb" alt="">
                  </div>
                  <div class="" v-if="!item.thumb">
                    <img src="../../../assets/images/img_default.png" alt="">
                  </div>
                  <div class="bottom">
                    {{ item.navigation_name }}
                  </div>
                </a>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="carefully_chosen_more" v-if="showHot" @click="moreGoods('is_hot')">
        <div class="left bold">热门精选</div>
        <div class="right">
          <span>更多</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <ul class="hot_lsit" v-if="showHot">
        <li v-for="(item, i) in hotGoodList" :key='i' @click="goToDetail(item.goods_id)">
          <div class="hot_top">
            <img :src="item.thumb" alt="">
          </div>
          <div class="hot_bottom">
            <div class="top">{{ item.title }}</div>
            <div class="bottom">
              <div class="left" v-if="item.vip_level_status && item.vip_level_status.status == 1">
                {{ $i18n.t('money') }} <span class="cost2">{{ item.vip_level_status.word }}</span>
              </div>
              <div class="left" v-else>
                   {{ $i18n.t('money') }}<span
                  style="font-size: 1.125rem;margin-left: 0.1563rem;font-weight: 500;">{{
                    item.price }}</span>
              </div>
              <div class="right">已购<span style="margin-left: 0.1563rem;">{{ item.total_sales }}</span></div>
            </div>
          </div>
        </li>
      </ul>
      <div class="carefully_chosen_more" v-if="showRec" @click="moreGoods('is_recommand')">
        <div class="left">
          <span :class="good_type=='is_recommand'?'is-active':'is-actived'"
          @click.stop="chang_handle('is_recommand')">为您推荐</span>
          <span :class="good_type=='is_discount'?'is-active':'is-actived'"
          @click.stop="chang_handle('is_discount')" style="margin-left: 1.5rem">优惠促销</span>
        </div>
        <div class="right">
          <span>更多</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <div class="full_video">
        <ul class="full_video_list">
          <li v-for="(item, i) in recGoodList" :key='i' @click="goToDetail(item.goods_id)">
            <div class="full_video_left">
              <img :src="item.thumb" alt="">
            </div>
            <div class="full_video_right">
              <div>
                <div class="video_name">{{ item.title }}</div>
                <div class="left" >
                  <div style="display: flex;align-items: center;" v-if="item.has_one_lecturer">
                    <img style="margin-right: 0.25rem;width: 1.375rem;height: 1.375rem;border-radius: 100px;"
                      :src="item.has_one_lecturer && item.has_one_lecturer.has_one_member && item.has_one_lecturer.has_one_member.avatar"
                      alt="">
                    <span>{{ item.has_one_lecturer.real_name }}</span>
                  </div>
                  <span>共{{ item.course_chapter_num }}节课</span>
                </div>
              </div>
              <div class="full_video_bottom">
                <div class="price" v-if="item.vip_level_status && item.vip_level_status.status == 1">
                  {{ $i18n.t('money') }} <span class="cost2">{{ item.vip_level_status.word }}</span>
                </div>
                <div class="price" v-else>
                  <span  style="font-size: 0.75rem;margin-right: 0.1563rem;">{{ $i18n.t('money') }}</span>
                  <span style="font-size: 1.125rem;margin-left: 0.1563rem;font-weight: 500;">{{ item.price }}</span>
                </div>
                <div class="buy">已购<span style="width:0.3125rem;display: inline-block;"></span>{{ item.total_sales }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div style="height: 0.75rem;"></div>
      <div class="carefully_chosen_more" v-if="showNew" @click="moreGoods('allGoods')">
        <div class="left bold">全部课程</div>
        <div class="right">
          <span>更多</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <div class="full_video" v-if="showNew">
        <ul class="full_video_list">
          <li v-for="(item, i) in newGoodList" :key='i' @click="goToDetail(item.goods_id)">
            <div class="full_video_left">
              <img :src="item.thumb" alt="">
            </div>
            <div class="full_video_right">
              <div>
                <div class="video_name">{{ item.title }}</div>
                <div class="left">
                  <div style="display: flex;align-items: center;" v-if="item.has_one_lecturer">
                    <img style="margin-right: 0.25rem;width: 1.375rem;height: 1.375rem;border-radius: 100px;"
                      :src="item.has_one_lecturer && item.has_one_lecturer.has_one_member && item.has_one_lecturer.has_one_member.avatar"
                      alt="">
                    <span>{{ item.has_one_lecturer.real_name }}</span>
                  </div>
                  <span>共{{ item.course_chapter_num }}节课</span>
                </div>
              </div>
              <div class="full_video_bottom">
                <div class="price" v-if="item.vip_level_status && item.vip_level_status.status == 1">
                  {{ $i18n.t('money') }} <span class="cost2">{{ item.vip_level_status.word }}</span>
                </div>
                <div class="price" v-else>
                  <span style="font-size: 0.75rem;margin-right: 0.1563rem;">{{ $i18n.t('money') }}</span>
                  <span style="font-size: 1.125rem;margin-left: 0.1563rem;font-weight: 500;">{{ item.price  }}</span>
                  <span class="buy">已购<span style="width:0.3125rem;display: inline-block;"></span>{{ item.total_sales
                  }}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="video_more" @click="getMoreData" v-if="isLoadMore">
          <span>{{ $i18n.t("加载更多") }}</span>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import courseIndex_controller from "./course_index_controller";
export default courseIndex_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.is-active{
  font-weight: bold;
  font-size: 1rem;
}
.is-actived{
  color: rgb(153, 153, 153);
  font-size: 0.875rem;
}
::v-deep .van-swipe__indicator--active {
  width: 0.75rem !important;
  height: 0.1875rem !important;
  background: rgba(255, 255, 255, 1) !important;
  border-radius: 5px !important;
}

::v-deep .van-swipe__indicator {
  width: 0.1875rem;
  height: 0.1875rem;
  background: rgba(255, 255, 255, .45);
  border-radius: 50%;
}

#course {
  padding-bottom: 3.0625rem;

  .custom-indicator {
    width: 0.1875rem;
    height: 0.1875rem;
    background: rgba(255, 255, 255, 0.39);
    border-radius: 50%;
    opacity: 0.45;
  }


  .main {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    box-sizing: border-box
  }

  .bold {
    font-weight: bold;
  }

  .bg-img {
    position: absolute;
    width: 1rem;
    height: 100%;
    left: 0.5625rem;
  }

  .left {
    text-align: left;
  }

  .search {
    position: relative;
    background: #fff;
    height: 2.8125rem;
    line-height: 2.8125rem;
    padding-top: 0.2rem;

    input {
      width: 21.063rem;
      height: 1.969rem;
      background-color: #f8f8f8;
      border-radius: 0.984rem;
      padding-left: 1rem;
    }

    .icon-sousuo {
      font-size: 16px;
      color: rgb(201, 201, 201);
      position: absolute;
      right: 2.25rem;
      z-index: 8888;
    }
  }

  .ment {
    min-height: 1rem;
    background: #fff;
    margin-bottom: 0.75rem;

    .video_list {
      background: #fff;
      padding: 0 0.781rem 0 0.781rem;
      display: flex;
      flex-wrap: wrap;

      .video_icon {
        margin-left: 0.9rem;
        margin-bottom: 0.7813rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .top {
          width: 2.875rem;
          height: 2.875rem;
          border-radius: 50%;
          margin: 0 auto 0.5rem;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .bottom {
          height: 1.844rem;
          line-height: 1.844rem;
          font-size: 0.875rem;
          width: 3.6rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .video_icon:nth-of-type(1) {
        margin-left: 0;
      }

      .video_icon:nth-of-type(6) {
        margin-left: 0;
      }
    }

    /* .sw_list { */

    /*  padding-top: 0.6rem; */

    /* } */

    .sw_list_6 {
      /* height:  6rem; */
    }

    .sw_list_12 {
      // height: 12rem;
    }

    .sw_list_0 {
      height: 0;
    }

    @media all and (max-width: 400px) {
      .sw_list_12 {
        // height: 13rem;
      }
    }

    /* ul { */

    /*  margin: 0; */

    /*  padding: 0; */

    /*  li { */

    /*    list-style: none; */

    /*    width: 25%; */

    /*    float: left; */

    /*    margin: 0; */

    /*    padding: 0; */

    /*    margin-bottom: 0.625rem; */

    /*    a { */

    /*      color: #2b2f33; */

    /*    } */

    /*    .image { */

    /*      height: 3.28rem; */

    /*      overflow: hidden; */

    /*      line-height: 3.28rem; */

    /*      border-radius: 30%; */

    /*    } */

    /*    img { */

    /*      width: 50%; */

    /*      vertical-align: middle; */

    /*      height: 90%; */

    /*    } */

    /*    p { */

    /*      margin: 0; */

    /*      padding: 0; */

    /*      font-size: 12px; */

    /*      line-height: 1.25rem; */

    /*    } */

    /*  } */

    /* } */
  }
}

li {
  list-style: none;
}

img {
  display: block;
}

.tupian {
  background: #fff;
  position: relative;
  padding: 1.25rem .75rem 0.7813rem;

  box-sizing:border-box .van-swipe {
    border-radius: 0.625rem;
    overflow: hidden;

  }
}

.carefully_chosen_more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 0.75rem;

  .left {
    line-height: 1.156rem;
    height: 1.156rem;
    font-size: 1rem;
  }

  .right {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 0.75rem;

    i {
      padding-left: 0.25rem;
      font-size: 0.75rem;
    }
  }
}

.recommend_List {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 1.5rem;
  padding-top: 1rem;

  ul {
    margin-left: 0;
    padding-left: 6.6rem;
    display: flex;
    transition: 2s;

    li {
      flex-shrink: 0;
      background-color: #fff;
      width: 10.25rem;
      box-shadow:
        0.119rem 0.147rem 0.219rem 0 rgba(133, 133, 133, 0.11);
      border-radius: 0.313rem;
      -moz-transform: scale(0.9, 0.9);
      -webkit-transform: scale(0.9, 0.9);
      -o-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);

      .recommend_List_top {
        min-height: 6.15rem;

        img {
          width: 100%;
        }
      }

      .recommend_List_bottom {
        text-align: left;

        .top {
          height: 2rem;
          line-height: 2.32rem;
          padding-left: 1rem;
          padding-right: 1rem;
          font-size: 0.875rem;
          color: #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 0.531rem;

          .left {
            font-size: 0.75rem;
            line-height: 0.938rem;
            height: 0.938rem;
            color: #999;
            padding-left: 0.594rem;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .right {
            font-size: 0.875rem;
            line-height: 0.938rem;
            height: 0.938rem;
            color: #e20606;
            padding-right: 0.594rem;
            max-width: 6rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .cost2 {
              color: #ccc;
              font-size: 0.75rem;
              padding-left: 0.4rem;
            }
          }
        }
      }
    }

    li.active {
      -moz-transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
      transition: 1s;
    }
  }
}

.hot_lsit {
  display: flex;
  overflow-x: auto;
  padding: 0 0.844rem 0.75rem 0.844rem;
  background: #fff;
  margin-bottom: 0.75rem;

  &::-webkit-scrollbar {
    display: none;
  }

  li {
    background: #fff;
    margin: 0 0.75rem 0 0;

    .hot_top {
      width: 10.5938rem;
      height: 10.5938rem;
      border-radius: 0.625rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .hot_bottom {
      width: 10.5938rem;
      padding-top: 0.375rem;
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
      width: 100%;

      .top {
        text-align: left;
        color: #000;
        line-height: 1rem;
        height: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        padding-left: 0.2rem;
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .left {
          font-size: 0.75rem;
          line-height: 0.938rem;
          height: 0.938rem;
          color: #F15353;
          padding-left: 0.216rem;
          max-width: 6rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;

          .cost2 {
            color: #ccc;
            font-size: 0.75rem;
            padding-left: 0.4rem;
          }
        }

        .right {
          font-size: 0.752rem;
          line-height: 0.938rem;
          height: 0.938rem;
          letter-spacing: 0;
          color: #999;
          padding-right: 0.438rem;
          max-width: 6rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.full_video {
  background: #fff;

  .full_video_list {
    margin-left: 0.781rem;
    margin-right: 0.781rem;

    li {
      padding-bottom: 0.75rem;
      display: flex;

      .full_video_left {
        border-radius: 0.3125rem;
        overflow: hidden;
        width: 6.25rem;
        height: 6.25rem;
        margin-right: 0.75rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .full_video_right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .left {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0.5rem 0;
          color: #4B6AA7;
          height: 1.625rem;
          padding-left: 0.375rem;
          padding-right: 0.75rem;
          font-size: 0.75rem;
          box-sizing: border-box;
          z-index: 2;
        }

        .left::after {
          position: absolute;
          content: "";
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          z-index: 1;
          background: #4B6AA7;
          opacity: 0.05;
        }

        .video_name {
          text-align: left;
          line-height: 1rem;
          // height: 1.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          // margin-bottom: 0.25rem;
        }

        .full_video_bottom {
          display: flex;
          align-items: flex-end;

          .price {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.75rem;
            color: #F15353;
            margin-right: 0.5rem;
            text-align: right;

            .cost2 {
              color: #ccc;
              font-size: 0.75rem;
              padding-left: 0.4rem;
            }
          }

          .buy {
            font-size: 0.75rem;
            color: #999999;
            margin-left: 0.5rem;
          }
        }
      }
    }
  }

  .video_more {
    font-size: 0.799rem;
    line-height: 0.938rem;
    height: 0.938rem;
    color: #999;
    padding-bottom: 1.531rem;
  }
}

.sousuo {
  width: 60%;
  height: 1.875rem;
  background-color: #f2f2f2;
  border-radius: 0.9375rem;
  position: absolute;
  top: 0.625rem;
  left: 20%;
  z-index: 999;
  opacity: 0.6;
}

.Recommend,
.Hot,
.Newest {
  width: 100%;
  background-color: white;
  padding-right: 0;
  padding-left: 0.75rem;
}

.touxiang {
  width: 4rem;
  height: 4rem;
  background-color: green;
  float: left;
}

.content {
  padding-top: 0.625rem;
}

.title {
  width: 17.4375rem;
  float: left;
  text-align: left;
  margin-left: 0.75rem;
}

.title02 {
  color: #999;
  font-size: 12px;
  margin-bottom: 0.125rem;
}

.title01 {
  margin-bottom: 0.5rem;
  font-size: 15px;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.lecturer {
  float: left;
  color: #999;
  font-size: 12px;
}

.cost {
  float: right;
  color: red;
  line-height: 1rem;
  font-size: 12px;
}

.cost1 {
  font-size: 0.75rem;
  background: #f15353;
  color: white;
  padding: 0.2rem 0.5rem;
  border-top-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

#course {
  .course {
    margin-top: 2.5rem;
  }
}

.header {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  background-color: red;
}

input {
  border: none;
  width: 90%;
  height: 1.75rem;
  color: #b89e9e;
  line-height: 1.75rem;
  background-color: #fafafa;
  border-radius: 0.9375rem;
  padding: 0 1.125rem 0 1.125rem;
  margin: 0 auto;
  position: relative;
}

.Recommend,
.Hot,
.Newest {
  width: 100%;
  background-color: white;
  padding-left: 12px;
}

.touxiang {
  width: 5rem;
  height: 5rem;
  background-color: green;
  float: left;
}

.content {
  padding-top: 0.625rem;
}

.title {
  width: calc(100% - 6.75rem);
  float: left;
  text-align: left;
  margin-left: 0.75rem;
  padding-right: 0.875rem;
}

.title02 {
  color: #999;
  font-size: 12px;
  margin-bottom: 0.125rem;
}

.title01 {
  margin-bottom: 0.5rem;
  font-size: 15px;
  color: #333;
}

.lecturer {
  float: left;
  color: #999;
  font-size: 12px;
}

.cost {
  float: right;
  color: #f15353;
  line-height: 1rem;
  font-size: 14px;
}

#course {
  .course {
    margin-top: 2.5rem;
  }
}

.header {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
}</style>
